html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;list-style:none;font-weight:300;text-decoration:none}body{font-family:'Rubik',sans-serif;line-height:1;color:#212B66;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section, video{display:block}

@-ms-viewport {
    width: device-width;
}
/*
body{
    background-color: blue;
}
main{
    background-color: yellow;
}
header{
    background-color: green;
}
*/
.scrollmagic{
    opacity:0;
    -webkit-transform: translateY(50px);
        -ms-transform: translateY(50px);
            transform: translateY(50px);
    -webkit-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    transition: all 1s ease-out;
}
.scrollmagic.fade-in{
    opacity: 1;
    -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
            transform: translateY(0px);
}
.layer{
    opacity: 0;
}
.fade-in-parallax{
    opacity: 0;
    -webkit-animation-name: fadeInParallax;
            animation-name: fadeInParallax;
    -webkit-animation-duration: .15s;
            animation-duration: .15s;
    -webkit-animation-fill-mode:forwards;
            animation-fill-mode:forwards;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
}
@-webkit-keyframes fadeInParallax {
    from {opacity: 0;}
    to {opacity: 1;}
}
@keyframes fadeInParallax {
    from {opacity: 0;}
    to {opacity: 1;}
}
@media only screen and (min-width: 0px) {
    header{
        position: relative;
        max-width: 1000px;
        margin: 0 auto;
    }
    #menu {
        margin-top: 15px;
        position: absolute;
        left:15px;
        z-index: 10;
    }
    #menu img{
        width: 73px;
        margin-bottom: 10px;
    }
    #menu li{
        line-height: 14px;
        
    }
    #menu a:not(.imglink){
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 2px;
        color: #212B66;
        cursor: pointer;
        background-color: white;
        padding: 2px 5px;
        -webkit-transition:0.25s all ease-out;
        -o-transition:0.25s all ease-out;
        transition:0.25s all ease-out;
    }
    #menu a:not(.imglink):hover{
        text-decoration: none;
        color:#03ABFF;
        padding-left: 10px;
    }
    #menu a:not(.imglink):focus{
        text-decoration: none;
        color:#03ABFF;
        padding-left: 10px;
    }
    
    #parallax {
        width: 100%;
        margin: 0 auto;
        position: relative;
        padding-top: 40px;
    }
    #l0{
        text-align: center;
        padding-top: 250px;
    }
    #l0 a{
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 2px;
        color: #fff;
        cursor: pointer;
        padding: 10px 20px;
        background: -webkit-gradient(linear, right top, left top, from(#03abff),to(#212b66));
        background: -webkit-linear-gradient(right, #03abff 0%,#212b66 100%);
        background: -o-linear-gradient(right, #03abff 0%,#212b66 100%);
        background: linear-gradient(to left, #03abff 0%,#212b66 100%);
        border-radius: 50px;
        -webkit-box-shadow:  inset 0px 0px 0px 0px #212b66;
                box-shadow:  inset 0px 0px 0px 0px #212b66;
        -webkit-transition: all 0.1s ease-out;
        -o-transition: all 0.1s ease-out;
        transition: all 0.1s ease-out;
    }
    #l0 a:hover{
        color: #212b66;
        background: #fff;
        -webkit-box-shadow:  inset 0px 0px 0px 2px #212b66;
                box-shadow:  inset 0px 0px 0px 2px #212b66;
        text-decoration: none;
    }
    .focusme{
        -webkit-box-shadow: inset 0px 0px 0px 6px #D21B85 !important;
                box-shadow: inset 0px 0px 0px 6px #D21B85 !important;
        background: none !important;
        color: #D21B85 !important;
    }
    #scene {
        width: 100%;
        margin: 0 auto;
        padding-bottom: 80px;
    }
    .layer, .layer div {
        width: 100%;
        height: 250px;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        pointer-events: all;
    }
    .layer div{
        height:100%;
    }
    #l1 div{
        background-image: url(../img/layer1.png);
        -webkit-animation: l1 10s infinite ease-in-out;
                animation: l1 10s infinite ease-in-out;
    }
    @-webkit-keyframes l1{
        0%{-webkit-transform: translateY(0px);transform: translateY(0px);}
        40%{-webkit-transform: translateY(10px);transform: translateY(10px);}
    }
    @keyframes l1{
        0%{-webkit-transform: translateY(0px);transform: translateY(0px);}
        40%{-webkit-transform: translateY(10px);transform: translateY(10px);}
    }
    #l2 div{
        background-image: url(../img/layer2.png);
        -webkit-animation: l2 7s infinite ease-in-out;
                animation: l2 7s infinite ease-in-out;
        -webkit-transform: translateY(10px);
            -ms-transform: translateY(10px);
                transform: translateY(10px);
    }
    @-webkit-keyframes l2{
        0%{-webkit-transform: translateY(10px);transform: translateY(10px);}
        60%{-webkit-transform: translateY(0px);transform: translateY(0px);}
    }
    @keyframes l2{
        0%{-webkit-transform: translateY(10px);transform: translateY(10px);}
        60%{-webkit-transform: translateY(0px);transform: translateY(0px);}
    }
    #l3 div{
        background-image: url(../img/layer3.png);
        -webkit-animation: l3 8s infinite ease-in-out;
                animation: l3 8s infinite ease-in-out;
    }
    @-webkit-keyframes l3{
        0%{-webkit-transform: translateY(0px);transform: translateY(0px);}
        50%{-webkit-transform: translateY(10px);transform: translateY(10px);}
    }
    @keyframes l3{
        0%{-webkit-transform: translateY(0px);transform: translateY(0px);}
        50%{-webkit-transform: translateY(10px);transform: translateY(10px);}
    }
    #l4 div{
        background-image: url(../img/layer4.png);
        -webkit-animation: l4 9s infinite ease-in-out;
                animation: l4 9s infinite ease-in-out;
        -webkit-transform: translateY(10px);
            -ms-transform: translateY(10px);
                transform: translateY(10px);
    }
    @-webkit-keyframes l4{
        0%{-webkit-transform: translateY(10px);transform: translateY(10px);}
        45%{-webkit-transform: translateY(0px);transform: translateY(0px);}
    }
    @keyframes l4{
        0%{-webkit-transform: translateY(10px);transform: translateY(10px);}
        45%{-webkit-transform: translateY(0px);transform: translateY(0px);}
    }
    #l5 div{
        background-image: url(../img/layer5.png);
        -webkit-animation: l5 7.5s infinite ease-in-out;
                animation: l5 7.5s infinite ease-in-out;
    }
    @-webkit-keyframes l5{
        0%{-webkit-transform: translateY(0px);transform: translateY(0px);}
        55%{-webkit-transform: translateY(10px);transform: translateY(10px);}
    }
    @keyframes l5{
        0%{-webkit-transform: translateY(0px);transform: translateY(0px);}
        55%{-webkit-transform: translateY(10px);transform: translateY(10px);}
    }
    #l6 div{
        background-image: url(../img/layer6.png);
        -webkit-animation: l6 12s infinite ease-in-out;
                animation: l6 12s infinite ease-in-out;
    }
    @-webkit-keyframes l6{
        5%{-webkit-transform: translateY(0px);transform: translateY(0px);}
        55%{-webkit-transform: translateY(10px);transform: translateY(10px);}
    }
    @keyframes l6{
        5%{-webkit-transform: translateY(0px);transform: translateY(0px);}
        55%{-webkit-transform: translateY(10px);transform: translateY(10px);}
    }
    #l7 div{
        background-image: url(../img/layer7.png);
        -webkit-animation: l7 10s infinite ease-in-out;
                animation: l7 10s infinite ease-in-out;
    }
    @-webkit-keyframes l7{
        10%{-webkit-transform: translateY(0px);transform: translateY(0px);}
        60%{-webkit-transform: translateY(10px);transform: translateY(10px);}
    }
    @keyframes l7{
        10%{-webkit-transform: translateY(0px);transform: translateY(0px);}
        60%{-webkit-transform: translateY(10px);transform: translateY(10px);}
    }
    #l8 div{
        background-image: url(../img/layer8.png);
        -webkit-animation: l8 11s infinite ease-in-out;
                animation: l8 11s infinite ease-in-out;
    }
    @-webkit-keyframes l8{
        20%{-webkit-transform: translateY(0px);transform: translateY(0px);}
        80%{-webkit-transform: translateY(10px);transform: translateY(10px);}
    }
    @keyframes l8{
        20%{-webkit-transform: translateY(0px);transform: translateY(0px);}
        80%{-webkit-transform: translateY(10px);transform: translateY(10px);}
    }
    #l9 div{
        background-image: url(../img/layer9.png);
        -webkit-animation: l9 10.5s infinite ease-in-out;
                animation: l9 10.5s infinite ease-in-out;
    }
    @-webkit-keyframes l9{
        10%{-webkit-transform: translateY(0px);transform: translateY(0px);}
        70%{-webkit-transform: translateY(10px);transform: translateY(10px);}
    }
    @keyframes l9{
        10%{-webkit-transform: translateY(0px);transform: translateY(0px);}
        70%{-webkit-transform: translateY(10px);transform: translateY(10px);}
    }
    #l10 div{
        background-image: url(../img/layer10.png);
        -webkit-animation: l10 20s infinite ease-in-out;
                animation: l10 20s infinite ease-in-out;
    }
    @-webkit-keyframes l10{
        15%{-webkit-transform: translateY(0px);transform: translateY(0px);}
        75%{-webkit-transform: translateY(10px);transform: translateY(10px);}
    }
    @keyframes l10{
        15%{-webkit-transform: translateY(0px);transform: translateY(0px);}
        75%{-webkit-transform: translateY(10px);transform: translateY(10px);}
    }
    main{
        margin: 0 auto;
        width: 90%;  
    }
    h1{
        font-size:40px;
        line-height: 41px;
        margin-bottom: 20px;
    }
    h2{
        font-size: 20px;
        line-height: 20px;
        margin-bottom: 15px;
    }
    .boxbutton{
        height: 60px;
        padding: 10px 0;
    }
    .button{
        color: #D21B85;
        font-weight: 700;
        padding: 10px 20px;
        border-radius: 0 30px 30px 0;
        border: 1px solid #D21B85;
        background-color: #fff;
        -webkit-transition: all 0.1s ease-out;
        -o-transition: all 0.1s ease-out;
        transition: all 0.1s ease-out;
        letter-spacing: 2px;
    }
    .button:hover{
        color: #fff;
        text-decoration: none;
        background-color: #D21B85;
    }
    .button:focus{
       -webkit-box-shadow:  inset 0px 0px 0px 3px #D21B85;
               box-shadow:  inset 0px 0px 0px 3px #D21B85; 
    }
    p{
        font-size:14px;
        margin-bottom: 15px;
        line-height: 18px;
    }
    p span{
        color: #D21B85;
        font-weight: 700;
    }
    .anchorpush{
        margin-top: -160px;
        height: 160px;
    }
    #n_pre{
        position: relative;
    }
    .nopadding div{
        padding: 0;
    }
    video{
        padding-bottom: 20px;
        max-height: 815px;
        width: 100%;
    }
    .nomobile{
        display:none;
    }
    #n_art{
        text-align: center;
        margin-bottom: 60px;
    }
    #n_art h2{
        font-weight: 700;
        letter-spacing: 4px;
    }
    #n_art h1{
        padding-top: 30px;
    }
    .box{
        position: relative;
        width: 100%;
    }
    .box img{
        width: 70%;
        max-width: 250px;
        margin: 0 auto;
        margin-bottom: 20px;
        margin-top: 40px;
        user-drag: none; 
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
        pointer-events: none;
    }
    .field{
        border-bottom: 2px solid #212B66;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding-bottom: 10px;
        margin-top: 20px;
        -webkit-box-align: baseline;
            -ms-flex-align: baseline;
                align-items: baseline;
    }
    form p{
        margin-top: 10px;
    }
    label{
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 2px;
        width: 150px;
    }
    input[type="text"]{
        width: 100%;
        font-size: 18px;
        font-family:'Rubik',sans-serif;
        line-height:1;
        color:#212B66;
        padding: 5px 0px;
        border: none;
        border-bottom: solid 1px #03ABFF;
        outline: none;
    }
    input[type="submit"]{
        display: inline;
        cursor: pointer;
    }
    input.error{
        border-bottom: solid 2px #D21B85;
    }
    input[type="text"]:focus{
       border-bottom: solid 2px #03ABFF; 
    }
    .fieldinput{
        width: calc(100% - 150px);
    }
    .fieldinput label{
        font-size: 12px;
        font-weight: 100;
        letter-spacing: 0;
        width: auto;
        border: none;
    }
    .fieldsend{
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .infodock{
        padding-left: 15px;
        padding-right: 15px;
        margin-top: 50px;
    }
    .infodock div{
        margin: 0 auto;
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }
    .infodock img{
        width: 100%;
        max-width: 370px;
        margin-bottom: 15px;
        display: block;
        user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
        pointer-events: none;
    }
    #n_tic{
        margin-bottom: 80px;
    }
    #n_tic h2{
        font-size: 30px;
    }
    #n_tic h3{
        font-size: 20px;
    }
    .alt1{
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
    }
    #footer{
        background: -webkit-gradient(linear, left top, right top, from(#d21b85),to(#f4b430));
        background: -webkit-linear-gradient(left, #d21b85 0%,#f4b430 100%);
        background: -o-linear-gradient(left, #d21b85 0%,#f4b430 100%);
        background: linear-gradient(to right, #d21b85 0%,#f4b430 100%);
        padding: 30px 0 10px 30px
    }
    #footer p{
        color: white;
        font-weight: 700;
        letter-spacing: 2px;
        font-size: 10px;
        line-height: 12px;
    }
}

@media only screen and (min-width: 576px) {
    .layer {
        height: 325px;
    }
    #parallax {
        width: 100%;
        margin: 0 auto;
        position: relative;
        padding-top: 0px;
    }
    #l0{
        padding-top: 325px;
    }
    #shapeill0{
        display: none;
    }
    .nomobile{
        display:inherit;
    }
    video{
        width: 80%;
    }
    #n_art{

    }
    .box{
        width: 570px;
        height: 200px;
    }
    .box h2{
        font-size: 20px;
        line-height: 26px;
        position: absolute;
    }
    .box img{
        width: auto;
        max-width: none;
        margin: inherit;
        margin-bottom: 0;
        margin-top: 0;
        position: absolute;
    }
    #artist1 img{
        top:0;
        left:20px;
    }
    #artist1 h2{
        top:40px;
        right:110px;
    }
    #artist2 img{
        top:30px;
        left:71px;
    }
    #artist2 h2{
        top:50px;
        right:0;
    }
    #artist3 img{
        top:-30px;
        left:30px;
    }
    #artist3 h2{
        top:70px;
        right:60px;
    }
    #artist4 img{
        top:20px;
        left:70px;
    }
    #artist4 h2{
        top:180px;
        right:100px;
    }
    #artist5 img{
        top:20px;
        left:0;
    }
    #artist5 h2{
        top:150px;
        right:10px;
    }
    #artist6 img{
        top:80px;
        left:90px;
    }
    #artist6 h2{
        top:240px;
        right:120px;
    }
#artist6{
        height:350px;
    }
}

@media only screen and (min-width: 768px) {
    .layer {
        height: 415px;
    }
    #scene{
        margin-bottom: 50px;
    }
    #l0{
        padding-top: 425px;
    }
    #n_pre .col-md-7{
        padding-right: 50px;
    }
    .box h2{
        font-size: 26px;
        line-height: 30px;
    }
    #artist1 h2{
        top:40px;
        right:130px;
    }

#artist4 h2{
        top:180px;
        right:120px;
    }

#artist6 h2{
        top:240px;
        right:135px;
    }
    #shapeill0{
        display: inherit;
        width: 449px;
        background-image: url(../img/shapeill0-100.jpg);
        background-repeat: no-repeat;
        background-size: contain;
        height: 330px;
        position: absolute;
        right: 0;
        top:0;
        pointer-events: none;
    }
    video{
        padding-top: 0;
    }
    #n_art{
        margin-bottom: 120px;
    }
    .infodock{
        padding-left: 30px;
        padding-right: 30px;
        margin-top: 0px;
    }
    .infodock h2{
        margin-top: 20px;
    }
    .infodock img{
        margin-bottom: 0px;
    }
    

}

@media only screen and (min-width: 992px) {
    #scene {
        width: 100%;
        margin-bottom: 140px;
    
    }
    .layer {
        height: 625px;
        pointer-events: all;
    }
    #l0{
        padding-top: 645px;
    }
    #l0 a{
        font-size: 15px;
        letter-spacing: 3px;
        padding: 15px 25px;
    }
    main{
        width: 100%;
    }
    #shapeill0{
        top:-50px;
    }

}

@media only screen and (min-width: 1200px) {
}